import PropTypes from 'prop-types'
import React, { memo, useState } from 'react'
import { CategoryWrapper } from "./style"

const CategoryBar = memo((props) => {

    const [getIndex, setIndex] = useState(0)

    const { list } = props

    function handeClick(i) {
        setIndex(i)
    }

    return (
        <React.Fragment>
            {
                list.map((item, index) => {
                    return (
                        <CategoryWrapper key={index} onClick={() => handeClick(index)}>
                            <div className="icon">
                                {/* {getIndex == index ? <img src={item.actSvg} /> : <img src={item.svg} />} */}
                                <img src={item.svg} />
                            </div>
                            <div className={getIndex == index ? "title active" : "title"} >{item.name}</div>
                        </CategoryWrapper>
                    )
                })
            }
        </React.Fragment>
    )
})

CategoryBar.propTypes = {
    list: PropTypes.array
}

export default CategoryBar